// header.js

import React from 'react';
import { Link } from 'react-router-dom';
import './header.css';

class Header extends React.Component {
    render() {
        const { username, onLogout, location } = this.props;
        return (
            <div className='header'>
                <div className='nav'>
                    <span className='left-link'>
                        <Link to='/'>Home Page</Link>
                    </span>
                    {/** if user already logged in, show user info, otherwise show login button. */}
                    {username && username.length > 0 ? (
                        <span className='user'>
                            current user: {username}&nbsp;
                            <button onClick={onLogout}>Log out</button>
                        </span>
                    ) : (
                        <span className='right-link'>
                            {/** save the address of current page by state */}
                            <Link to={{
                                pathname: '/login',
                                state: { from: location }
                            }}>
                                Log in
                            </Link>
                        </span>
                    )}
                </div>
            </div>
        );
    }
}

export default Header;
